<template>
	<view class="page">
		<comHead :datas="datasObj">
			<template #content>
				<view style="width: 100%;height: 200px;">
					<view class="head_box mt-30">
						<view class="flex-bwt">
							<text class="ft-28 c-33 fw-800 ml-30">积分余额</text>
							<view class="rules_box flex-center ft-22 c-99">
								积分说明
								<image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png"
									mode="aspectFit">
								</image>
							</view>
						</view>
						<view class="head_box_money ml-30">
							<span class="moneyItem ft-num3 ">{{ detail.integral_format }}</span>
							={{ detail.integral_exchange }}
						</view>
					</view>
					<view class="record_box">
						<view class="exchange_box flex-bwt">
							<view class="flex-center ft-24 c-33 fw-800">
								<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gift.png"
									mode="aspectFit">
								</image>积分兑换
							</view>
							<image class="icon_samll" @click="goPage('/subpackage/integral/integralShopping')"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
							</image>
						</view>
						<view class="record_box_content">
							<view class="title_box flex-bwt">
								<view class="title_box_item flex-center pd-20 ft-20">
									<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
										mode="aspectFit">
									</image> <span class="ft-24 c-66">今日积分</span> +<span class="ft-num3 ft-36 c-33">{{
										detail.today_integral_format }}</span>
								</view>
								<text class="line"
									style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>

								<view class="title_box_item flex-center ft-20">
									<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
										mode="aspectFit">
									</image> <span class="ft-24 c-66">累计积分</span> +<span class="ft-num3 ft-36 c-33">{{
										detail.income_integral_format }}</span>
								</view>

							</view>
						</view>
					</view>
				</view>
			</template>

		</comHead>
		<view class="content_box w-100 mt-180">

			<!-- <view class="head_box mt-30">
				<view class="flex-bwt">
					<text class="ft-28 c-33 fw-800 ml-30">积分余额</text>
					<view class="rules_box flex-center ft-22 c-99">
						积分说明
						<image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view class="head_box_money ml-30">
					<span class="moneyItem ft-num3 ">{{ detail.integral_format }}</span>
					={{ detail.integral_exchange }}
				</view>
			</view> -->
			<view class="record_box">
				<!-- <view class="exchange_box flex-bwt">
					<view class="flex-center ft-24 c-33 fw-800">
						<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gift.png" mode="aspectFit">
						</image>积分兑换
					</view>
					<image class="icon_samll" @click="goPage('/subpackage/integral/integralShopping')"
						src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
					</image>
				</view> -->
				<view class="record_box_content">
					<!-- <view class="title_box flex-bwt">
						<view class="title_box_item flex-center pd-20 ft-20">
							<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
								mode="aspectFit">
							</image> <span class="ft-24 c-66">今日积分</span> +<span class="ft-num3 ft-36 c-33">{{
								detail.today_integral_format }}</span>
						</view>
						<text class="line"
							style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>

						<view class="title_box_item flex-center ft-20">
							<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
								mode="aspectFit">
							</image> <span class="ft-24 c-66">累计积分</span> +<span class="ft-num3 ft-36 c-33">{{
								detail.income_integral_format }}</span>
						</view>

					</view> -->
					<view class="record_box_content_item pd-30">
						<view class="tabs_box flex-bwt">
							<view class="tabBar flex-eve">
								<view class="item ft c-66 flex-center mr-20" :class="{ active: selectId === item.id }"
									v-for="(item, index) in tableList" :key="index" @click="selectBtn(index, item)">{{
										item.name }}
								</view>
							</view>
							<view class="more ft-24 c-33 flex-center"
								@click="goPage('/subpackage/integral/integralMoreList')">
								更多明细
								<image class="icon_samll ml-8"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<view class="card_box">
							<view class="card_item bd-r20 mt-30" v-for="(item, index) in integralList" :key="index">
								<view class="flex-bwt">
									<text class="ft-24 c-33 fw-800">{{ item.title }}</text>
									<text class="rig ft-22 c-99">{{ item.created_at.substr(0, 10) }}</text>
								</view>
								<view class="flex-bwt">
									<text class="ft-22 c-99 te-1">{{ item.des }}</text>
									<view class="rig ft-20 c-33" :class="{ active: item.type == 2 }">{{ item.type == 2 ?
										'-' :
										'+'
									}}<span class="ft-36 fw-900 ft-num3">{{ item.integral }}</span>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>


	</view>
</template>

<script setup lang="js">
import comHead from '@/components/comHead.vue'
import {
	reactive,
	ref
} from 'vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";

let datasObj = reactive({
	title: '我的积分',
	img: 'https://cdn.oss.bon-top.cn/static_bc/images/head_bg.png',
	color: `#fff`,
	isImg: true,
	isColor:true,
	direction: '',
	scrollTop: 0,
	height: 800
})
const tableList = ref([{
	id: 1,
	name: '积分获取',
	key: ''
},
{
	id: 2,
	name: '积分支出',
	key: ''
}
])
const list = ref([{
	title: '每日任务',
	text: '评论或问答：美国 EB1A 杰出人才移民 成就卓越人评论或问答：美国 EB1A 杰出人才移',
	time: '2025-02-25',
	num: -10
}])
// 选项点击切换
const selectId = ref(1)
const selectName = ref('')
const selectBtn = async (idx, item) => {
	selectId.value = item.id
	selectName.value = item.key
	reloadData()
}

const reloadData = () => {
	integralPage.value = 1
	integralList.value = []
	integralLoading.value = true
	getIntegralListData()
}

const integralPage = ref(1)
const integralList = ref([])
const integralLoading = ref(true)
const detail = ref({})
const getIntegralListData = () => {
	if (!integralLoading.value) {
		return
	}
	uni.showLoading()
	integralLoading.value = false
	utils
		.request(
			api.getIntegralList, {
			page: integralPage.value,
			pageSize: 10,
			type: selectId.value
		},
			"get"
		)
		.then((res) => {
			if (Object.keys(detail.value).length == 0) {
				detail.value = res.data
			}
			integralPage.value++
			if (res.data.items.length > 0) {
				integralList.value = integralList.value.concat(res.data.items)
			}
			if (integralPage.value <= res.data.pageInfo.totalPage) {
				integralLoading.value = true
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	getIntegralListData()
})

onReachBottom(() => {
	getIntegralListData()
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}
</script>

<style lang="scss" scoped>
.tabBar {
	.item {
		padding: 0 20rpx;
		height: 72rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
		color: #333;
	}
}

.content_box {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	top: 300rpx;
}

.head_box {
	.rules_box {
		background-color: #ffffff79;
		width: 154rpx;
		height: 52rpx;
		border-radius: 20rpx 0 0 20rpx;


		.icons {
			width: 22rpx;
			height: 22rpx;
			margin-top: 2rpx;
			margin-left: 2rpx;
		}
	}

	&_money {
		color: #9C0000;
		font-size: 24rpx;

		.moneyItem {
			font-size: 56rpx;
			color: #333;
		}
	}
}

.record_box {
	background: linear-gradient(to left, #FFBA61, #DBF046);
	border-radius: 40rpx 40rpx 0 0;

	.exchange_box {
		padding: 20rpx 30rpx;

		.imgs {
			width: 40rpx;
			height: 34rpx;
		}
	}

	&_content {
		background-color: #F8F8F8;
		border-radius: 40rpx 40rpx 0 0;

		.title_box {
			.imgs {
				width: 36rpx;
				height: 36rpx;
			}

			.title_box_item {
				flex: 1;
			}
		}

		&_item {
			border-radius: 40rpx 40rpx 0 0;
			background-color: #fff;

			.tabs_box {
				.more {
					border: 2rpx solid #333;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
				}
			}

			.card_box {
				box-sizing: border-box;

				.card_item {
					height: 116rpx;
					width: 100%;
					background-color: #F8F8F8;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					padding: 0 20rpx;
					box-sizing: border-box;

					.rig {
						width: 150rpx;
						flex-shrink: 0;
						text-align: right;

					}

					.active {
						color: #FF0000;
					}

				}
			}

		}
	}
}
</style>